<template>
  <!-- <el-card class="box-card"> -->
  <el-form
    :label-position="labelPosition"
    label-width="80px"
    :model="form"
    ref="ref_form"
    :rules="rules_editPassForm"
    class="loginForm sign-in-form"
    :hide-required-asterisk="hideRequiredAsterisk"
  >
    <el-form-item label=" " prop="userName">
      <el-input placeholder=" " disabled v-model.trim="form.userName">
        <template #prepend>
          <img src="~@/assets/img/icon/user.png" alt
        /></template>
      </el-input>
    </el-form-item>
    <el-form-item label=" " prop="password">
      <el-input
        type="password"
        placeholder="请输入原密码"
        v-model.trim="form.password"
        @keyup.enter="onSubmit"
      >
        <template #prepend>
          <img src="~@/assets/img/icon/pass.png" alt
        /></template>
      </el-input>
    </el-form-item>
    <el-form-item label=" " prop="password2">
      <el-input
        type="password"
        placeholder="请输入新密码"
        v-model.trim="form.password2"
        @keyup.enter="onSubmit"
      >
        <template #prepend>
          <img src="~@/assets/img/icon/pass.png" alt
        /></template>
      </el-input>
    </el-form-item>
    <el-form-item label=" ">
      <div id="btn-class">
        <el-button type="primary" plain @click="onSubmit" icon="el-icon-check"
          >提 交</el-button
        >
        <el-button plain @click="backtrack" icon="el-icon-refresh-right"
          >返 回</el-button
        >
      </div>
    </el-form-item>
  </el-form>
  <!-- </el-card> -->
</template>
<script>
import login from "@/mixin/login";
import { getUserName } from "@/utils/auth";
import { useRouter } from "vue-router";

import { reactive, toRef, toRefs, getCurrentInstance } from "vue";

function useFeatureX() {
  // 响应式数据抽离出setup 具有代码可读性
  const state = reactive({
    form: { userName: getUserName(), password: "", password2: "" },
  });
  return state;
}

export default {
  name: "EditPass",
  // context
  setup(props, { attrs, slots, emit }) {
    const { ctx } = getCurrentInstance();
    const data = useFeatureX();
    const router = useRouter();

    const { mixin_loginData, clickBtn } = login();
    const onSubmit = () => {
      ctx.$refs.ref_form.validate((valid) => {
        if (valid) {
          emit("onSubmitPass", data.form);
        } else {
          return false;
        }
      });
    };
    const backtrack = () => {
      router.push("/");
    };
    return {
      ...toRefs(mixin_loginData),
      ...toRefs(data),
      clickBtn,
      onSubmit,
      backtrack,
    };
  },
};
</script>

<style lang="scss" scoped>
#btn-class {
  display: flex;
  width: 100%;
  text-align: center;
  margin: auto;
  justify-content: space-between;
  > .el-button {
    width: 50% !important;
    margin-top: 20px;
    border-radius: 20px;
  }
}
</style>